function $(selector) {
    return document.querySelector(selector);
}
// 异步请求工具方法
async function get(url, params) {
    return await axios.get(url, { params });
}
// 注意：由于发送了jsonp请求，需要把回调函数放在全局才能识别，然后回调函数内部又需要调用render方法，所以要把render方法和回调函数handleResponse全部提到全局作用域下，相应的数据也要提到外面
// 渲染视图方法
function render() {
    const {
        provinceData,
        cityData,
        countyData,
        provinceTitle,
        cityTitle,
        countyTitle,
        weatherData,
    } = data;
    $("#div").innerHTML = `
              <div class="header">
                <h4 class="header_title">选择城市</h4>
                <div class="header_select">
                  <select class="select" id="province">
                    <option value="">请选择省</option>
                    ${provinceData.map((item) => {
        return `<option ${item.name === provinceTitle ? "selected" : ""
            } value="${item.name}">${item.name}</option>`;
    })}
                  </select>
                  <select class="select" id="city">
                    <option value="">请选择市</option>
                    ${cityData.map((item) => {
        return `<option ${item.name === cityTitle ? "selected" : ""
            } value="${item.name}">${item.name}</option>`;
    })}
                  </select>
                  <select class="select" id="county">
                    <option value="">请选择区</option>
                    ${countyData.map((item) => {
        return `<option ${item.name === countyTitle ? "selected" : ""
            } value="${item.name}">${item.name}</option>`;
    })}
                  </select>
                </div>
              </div>
              <div class="content_weather">
                <h2 class="content_weather_title">${provinceTitle}${cityTitle}${countyTitle}${countyTitle ? "未来七日天气预报" : ""
        }</h2>
                <table class="content_weather_list" border>
                  <thead class="head">
                    <tr class="row">
                      <td class="col">日期</td>
                      <td class="col">白天天气</td>
                      <td class="col">白天风向</td>
                      <td class="col">白天风力</td>
                      <td class="col">夜晚天气</td>
                      <td class="col">夜晚风向</td>
                      <td class="col">夜晚风力</td>
                      <td class="col">最高温度</td>
                      <td class="col">最低温度</td>
                    </tr>
                  </thead>
                  <tbody class="main">
                    ${Object.values(weatherData).length
            ? Object.values(weatherData)
                .map((item) => {
                    return `
                          <tr class="row">
                            <td class="col">${item.time}</td>
                            <td class="col">${item.day_weather}</td>
                            <td class="col">${item.day_wind_direction}</td>
                            <td class="col">${item.day_wind_power}级</td>
                            <td class="col">${item.night_weather}</td>
                            <td class="col">${item.night_wind_direction}</td>
                            <td class="col">${item.night_wind_power}级</td>
                            <td class="col">${item.max_degree}℃</td>
                            <td class="col">${item.min_degree}℃</td>
                          </tr>
                        `;
                })
                .join("")
            : `
                        <tr style="height: 50px;">
                          <td colspan="9">暂无数据</td>  
                        </tr>
                      `
        }
                  </tbody>
                </table>
              </div>
            `;
}

// jsonp回调函数
function handleResponse(res) {
    console.log(res);
    data.weatherData = res.data.forecast_24h;
    render();
}

// 页面加载完
window.onload = async function () {
    // 页面加载时先把所有的省份获取到
    const res = await get("https://restapi.amap.com/v3/config/district", {
        keywords: "",
        key: "a321f609de73d8e07ba4505d0d8e00a3",
    });
    // 把省份保存起来
    data.provinceData = res?.data?.districts[0]?.districts;
    render(); // 初始化渲染

    // 监听省份下拉框切换事件
    document.body.addEventListener("change", async (e) => {
        if (e.target.id === "province") {
            // 切换省份
            const keywords = e.target.value;
            if (!keywords) {
                // 异常处理：如果选择了请选择省，市、区和列表数据全部清空
                data.provinceTitle = "";
                data.cityTitle = "";
                data.countyTitle = "";
                data.weatherData = {};
                render(); // 渲染视图
                return; // 不用执行后面的代码了
            }
            data.provinceTitle = keywords; // 把选中的省份保存起来
            data.cityTitle = ""; // 清空城市
            data.countyTitle = ""; // 清空区域
            data.weatherData = {}; // 清空天气数据
            const params = {
                keywords,
                key: "a321f609de73d8e07ba4505d0d8e00a3",
            };
            // 发送异步请求请求城市数据
            const res = await get(
                "https://restapi.amap.com/v3/config/district",
                params
            );
            data.cityData = res?.data?.districts[0]?.districts; // 保存城市数据
            render(); // 渲染视图
        }
    });

    // 监听城市下拉框切换事件
    document.body.addEventListener("change", async (e) => {
        if (e.target.id === "city") {
            // 切换市
            const keywords = e.target.value;
            if (!keywords) {
                // 异常处理：如果选择了请选择市，区和列表数据全部清空
                data.cityTitle = "";
                data.countyTitle = "";
                data.weatherData = {};
                render(); // 渲染视图
                return; // 不用执行后面的代码了
            }
            data.cityTitle = keywords; // 把选择的城市保存起来
            data.countyTitle = ""; // 清空区域
            data.weatherData = {}; // 清空天气数据
            const params = {
                keywords,
                key: "a321f609de73d8e07ba4505d0d8e00a3",
            };
            // 发送异步请求请求区域数据
            const res = await get(
                "https://restapi.amap.com/v3/config/district",
                params
            );
            data.countyData = res?.data?.districts[0]?.districts;
            render(); // 渲染视图
        }
    });

    // 监听区域下拉框切换事件
    document.body.addEventListener("change", async (e) => {
        if (e.target.id === "county") {
            // 切换县
            const keywords = e.target.value;
            if (!keywords) return;
            data.countyTitle = keywords; // 把选择的区域保存起来
            // 发送jsonp请求获取天气数据
            // 创建一个script标签
            var script = document.createElement("script");
            // 设置src属性，包含回调函数的名称
            script.src = `https://wis.qq.com/weather/common?source=pc&weather_type=forecast_24h&province=${data.provinceTitle}&city=${data.cityTitle}&county=${data.countyTitle}&callback=handleResponse`;
            // 将script标签添加到文档中
            document.body.appendChild(script);
        }
    });
};